<template>
  <a-card>
    <span slot="title">
      <label class="back-title" @click="$router.push({ name: 'ha_role' })"
        ><a-icon type="left" /> {{ role.name }} - 菜单分配</label
      >
    </span>
    <a-button slot="extra" type="primary" @click="onSubmit"> 保存 </a-button>
    <a-table
      :columns="columns"
      rowKey="id"
      :data-source="data"
      :scroll="{ y: 600 }"
      :pagination="false"
      :rowSelection="{ fixed: true, onSelect: selectHandle, selectedRowKeys: selectedRowKeys, onChange: changeHandle }"
    />
  </a-card>
</template>

<style lang="css" scope src="@/style/css/style.css"></style>

<script>
import { batchSaveMenu, queryMenuIds, queryMenuTree } from '@/api/base/ha_role'
import { fixChildren } from '@/utils/comm.js'
export default {
  data() {
    return {
      role: { id: '', name: '' },
      columns: [
        {
          title: '名称',
          dataIndex: 'description',
          key: 'description'
        },
        {
          title: '链接',
          dataIndex: 'path',
          key: 'path'
        },
        {
          title: '组件',
          dataIndex: 'component',
          key: 'component'
        },
      ],
      data: [],
      selectedRowKeys: [],
      agent: { name: '' },
      menus: [],
      selectedRowKeys: []
    }
  },
  created () {
    this.role.id = this.$route.params.id
    this.role.name = this.$route.params.name
    this.queryMenuTree()
    this.queryRoleMenu(this.role.id)
  },
  methods: {
    selectHandle (record, selected, selectedRows, evt) {
      if (selected) {
        record.children.forEach((item) => {
          if (!this.selectedRowKeys.includes(item.id)) {
            this.selectedRowKeys.push(item.id)
          }
        })
        if (!this.selectedRowKeys.includes(record.pid)) {
          this.selectedRowKeys.push(record.pid)
        }
      } else {
        record.children.forEach((item) => {
          this.selectedRowKeys = this.selectedRowKeys.filter((ite) => ite !== item.id)
        })
      }
    },
    changeHandle (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    queryMenuTree () {
      queryMenuTree().then((res) => {
        if (res.code === 0) {
          this.data = fixChildren(res.data)
        }
      })
    },
    onSubmit () {
      let body = new Array()
      this.selectedRowKeys.forEach((id) => {
        if (id !== 0) {
          body.push({ roleid: this.role.id, functionid: id })
        }
      })
      const savem = this.$message.loading('数据正在保存中...', 0)
      batchSaveMenu({ roleId: this.role.id }, body).then((res) => {
        if (res.code !== 0) {
          setTimeout(savem, 0)
          this.loading = false
        } else {
          setTimeout(savem, 0)
          this.$message.success('角色菜单保存成功')
          this.loading = false
        }
      })
    },
    queryRoleMenu (roleid) {
      queryMenuIds({ roleid: roleid }).then((res) => {
        if (res.code === 0) {
          this.selectedRowKeys = res.data
        }
      })
    }
  }
}
</script>
